<template>
  <div id='LeftMenu' aria-readonly="true">
    <div class='LeftMenu' @click='LeftMenu'>
      <RouterLink to='' :style="menuImgStyle()">
        <img class='menuImg' src='src/assets/icon/menu_cyan.png' title='菜单' alt='' v-show="menuImg">
        <img class='menuImg' src='src/assets/icon/menu.png' title='菜单' alt='' v-show="!menuImg">
      </RouterLink>
    </div>
    <div class='thisMenus' @click='thisMenu'>
      <router-link v-for='(menu,key) in thisMenus' :key='key' :to='menu.link' :style='menu.style+menu.styleTwo'>
        <span class='thisMenuItem' :style='menu.style' :title='menu.title'>
            {{ menu.name }}
        </span>
      </router-link>
    </div>
    <div ref='leftMenus' class='leftMenus' v-show="menuImg" :style="leftMenusStyle()">
      <router-link v-for='(it,i) in leftMenus' :key='i' :to='it.link' :title='it.title' class='leftMenu'>
        <el-tag v-if="!mainLinks.includes(it.link)" effect="" class='leftMenuItem' :style="leftMenuItemStyle(it.link)">
          <span>{{ it.name }}</span>
        </el-tag>
      </router-link>
    </div>
  </div>
</template>

<script>

export default {
  name: 'LeftMenu',

  data() {
    return {
      path: this.$route.path,
      home: "/",
      menuImg: false,
      menus: [
        {
          name: '首页', title: '首页', link: '/',
          style: 'background: dodgerblue;', styleTwo: 'display: none;'
        },
        {
          name: '建设中', title: '建设中', link: '/building',
          style: 'background: steelblue;', styleTwo: 'display: none;'
        },
        {
          name: '用户', title: '用户', link: '/user',
          style: 'background: darkblue;', styleTwo: 'display: none;'
        },
        {
          name: '知识', title: '知识', link: '/know',
          style: 'background: blue;', styleTwo: ''
        },
        {
          name: '信息', title: '信息', link: '/info',
          style: 'background: DeepSkyBlue;', styleTwo: ''
        },
        {
          name: '创作', title: '创作', link: '/create',
          style: 'background: Turquoise;', styleTwo: ''
        },
        {
          name: '星域', title: '星域', link: '/space',
          style: 'background: LimeGreen;', styleTwo: ''
        },
        {
          name: '导航', title: '导航', link: '/space/webSave',
          style: 'background: LimeGreen;', styleTwo: 'display: none;'
        },
        {
          name: '博客', title: '博客', link: '/space/blog',
          style: 'background: LimeGreen;', styleTwo: 'display: none;'
        },
        {
          name: '编程', title: '编程', link: '/program',
          style: 'background: blue;', styleTwo: 'display: none;'
        },
      ],
      thisMenus: [],
      leftMenus: [
        {link: '/#', name: '首页', title: '首页'},
        {link: '/', name: '首页', title: '首页'},
        {link: '/know', name: '知识', title: '知识'},
        {link: '/know?type=编程', name: '编程', title: '编程'},
        {link: '/know?type=机电', name: '机电', title: '机电'},
        {link: '/know?type=数学', name: '数学', title: '数学'},
        {link: '/know?type=物理', name: '物理', title: '物理'},
        {link: '/know?type=天文', name: '天文', title: '天文'},
        {link: '/know?type=地理', name: '地理', title: '地理'},
        {link: '/know?type=化学', name: '化学', title: '化学'},
        {link: '/know?type=生物', name: '生物', title: '生物'},
        {link: '/know?type=医学', name: '医学', title: '医学'},
        {link: '/know?type=法学', name: '法学', title: '法学'},
        {link: '/know?type=外语', name: '外语', title: '外语'},
        {link: '/know?type=文学', name: '文学', title: '文学'},
        {link: '/know?type=艺术', name: '艺术', title: '艺术'},
        {link: '/info', name: '信息', title: '信息'},
        {link: '/info?type=热点', name: '热点', title: '热点'},
        {link: '/info?type=资讯', name: '资讯', title: '资讯'},
        {link: '/info?type=信息', name: '信息', title: '信息'},
        {link: '/create', name: '创作', title: '创作'},
        {link: '/create?type=AI助手', name: 'AI助手', title: 'AI助手'},
        {link: '/create?type=AI计算', name: 'AI计算', title: 'AI计算'},
        {link: '/create?type=AI创作', name: 'AI创作', title: 'AI创作'},
        {link: '/create?type=智能化', name: '智能化', title: '智能化'},
        {link: '/space', name: '星域', title: '星域'},
        {link: '/space/webSave', name: '导航', title: '导航'},
        {link: '/space/', name: '发布', title: '发布'},
        {link: '/space/blog', name: '博客', title: '博客'},
      ],
      mainLinks: ["/#", "/know", "/info", "/create", "/space",],
    }
  },
  created() {
    //this.menuImg = this.path === "/";
    this.thisMenus = this.menus;
    this.thisMenu();
    /*if (this.path.includes("/manage") || this.path.includes("/detail")) {
      this.$nextTick(() => {
        // 启用选择
        document.onselectstart = new Function("event.returnValue=true");
      });
    } else {
      this.$nextTick(() => {
        // 禁用选择
        document.onselectstart = new Function("event.returnValue=false");
      });
    }*/
  },
  props: {
    fromPath: { //子组件通过props接受父组件的传值
      type: String,
      required: false,
    },
  },
  methods: {
    menuImgStyle() {
      if (this.path === "/") {
        return 'margin-left: 17px;';
      } else {
        return 'margin-left: 1px;';
      }
    },
    leftMenusStyle() {
      if (this.path !== "/") {
        return 'margin-top: 20px;';
      }
    },
    leftMenuItemStyle(link) {
      if (this.path === link && link === "/") {
        return 'color: lightskyblue;';
      }
      if (this.path !== "/" && link.includes(this.path)) {
        return 'color: lightskyblue;';
      }
    },
    thisMenu() {
      //如果菜单不是全部菜单
      if (this.thisMenus !== this.menus) {
        //如果当前页是首页时，菜单=全部菜单，隐藏‘首页’
        if (this.path === "/") {
          this.LeftMenu();
          //this.thisMenus = this.menus;
          //this.thisMenus[0].styleTwo = 'display: none;';
        }
        //组件传递fromPath空时跳转路径=首页
        this.$router.replace(this.fromPath === undefined ? "/" : this.fromPath);
        return true;
      }
      //console.log("path：" + this.path);
      this.thisMenus.forEach(i => {
        //如果是当前页则显示当前页的标签
        if (this.path === i.link || this.path === i.link + '/detail' || this.path === i.link + '/manage') {
          //点击菜单时修改LeftMenus
          const menus = [];
          i.styleTwo = this.path === '/' ? i.styleTwo : '';
          menus.push(i);
          this.thisMenus = menus;
          return true;
        }
      })
    },
    LeftMenu: function () {
      this.menuImg = !this.menuImg;
      if (this.path === "/") {
        //this.leftMenus[0].name ? this.leftMenus.unshift({link: ""}) : this.leftMenus.splice(0, 1)
        this.$emit("LeftMenusShow", this.menuImg);//自定义事件  传递值“子向父组件传值”
      }
    },
  },
}
</script>

<style scoped>
#LeftMenu {
  width: 400px;
  height: 70px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-top: 5px;
  margin-left: 5px;
  z-index: 2;
}

.menuImg {
  width: 28px;
  height: 28px;
}

.thisMenus {
  margin-left: 35px;
  margin-top: -29px;
}

.thisMenuItem {
  font-size: 14px;
  padding: 6px 14px;
}

.leftMenus {
  position: absolute;
  width: 70px;
  height: 95%;
  margin-top: 40px;
  margin-left: -5px;
  text-align: center;
  overflow: auto;
}

.leftMenu {
  padding: 0;
}

.leftMenuItem {
  width: 70px;
  font-size: 15px;
  padding-top: 1px;
  color: lightcyan;
  background: transparent;
  border: none;
  border-radius: unset;
  border-top: thin ridge lightsteelblue;
}

.leftMenuItem:hover {
  color: white;
  background: cornflowerblue;
  /*box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 内外阴影inset，默认外阴影 */
  box-shadow: 0 5px 10px 0 azure;
}

a {
  color: snow;
  text-decoration: none;
}

</style>
